iT邦幫忙

2023 iThome 鐵人賽

DAY 2
0
SideProject30

sideproject-簡易網站系列 第 2

DAY-2 CSS基礎

  • 分享至 

  • xImage
  •  

在使用css為字體上色時分為

.red只控制有class="red"的元素
blue則是控制段落間的所有字體
#id 用於標記特定元素 理應不重複
像是

.red {
    color: red;
  }
blue {
    color: blue;
  }
#yellow {
    color: yellow;
  }

且有許多可以控制字體 大小等的程式碼
像是

font-size: 60px;            
text-align: center;                     /*字型位置(此處居中)*/
line-height: 1;
letter-spacing: 2px;                    /*間距*/
font-family: 'Noto Serif TC', serif;    /*字體*/

可以替網頁設置一個背景顏色

background-color: #F0A2F0;            /*網頁背景顏色*/

也可以新增背景圖面(此次未使用)

body {
    /* 此為需要兩層背景時所使用
    width: 600px;  //此背景寬度
    margin: 0 auto;//居中
    background-color: #ff9500;//此背景顏色
    padding: 0 20px 20px 20px;//設定上 右 下 左 與邊框的間距
    border: 5px solid black;//邊框寬度
    */
  }

亦可以為圖片調整位置

img {/*置中
    display: block;
    margin: 0 auto;*/
    
}

上一篇
Day-1 了解HTML基礎
下一篇
DAY-3 利用前兩天所學做做看
系列文
sideproject-簡易網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言